<template>
  <div @keyup.enter="getData()">
    <el-form class="query-table-form" :inline="true">
      <el-form-item>
        <el-input v-model="params.customer_name" placeholder="项目名称查询" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="params.corp_name" placeholder="负责人查询" :clearable="true"></el-input>
      </el-form-item>
      <el-form-item>
        <select-address
          v-model="params.address_code"
          placeholder="地址查询"
          clearable
          :auto-top="true"
          @change="getData()"
        ></select-address>
      </el-form-item>
      <el-form-item>
        <el-button @click="getData()">查询</el-button>
      </el-form-item>
    </el-form>
    <c-table border v-loading="loading" :columns="tableColumns" :data="tableData">
      <template v-slot:address="scope">
        <div class="text-truncate" :title="scope.row.address">{{ scope.row.address }}</div>
      </template>
      <template v-slot:time="scope">
        <span v-if="+scope.row.submit_type === 1">
          {{ $utils.dateFormat(scope.row.approved_date, 'yyyy.MM.dd hh:mm') }}
        </span>
        <span v-if="+scope.row.submit_type === 2">
          {{ $utils.dateFormat(scope.row.create_time, 'yyyy.MM.dd hh:mm') }}
        </span>
      </template>
      <template v-slot:status="scope">
        <div class="badge" :class="`badge-${enumItemStatus[+scope.row.item_status].css}`">
          {{ enumItemStatus[+scope.row.item_status].label }}
        </div>
      </template>

      <template v-slot:resPersons="scope">
        <el-popover placement="top-start" title="项目经理" trigger="hover">
          <div>
            <div>{{ `A角： ${scope.row.res_a_name || '-'}；` }}</div>
            <div class="mb-2">{{ `电话： ${scope.row.res_a_phone || '-'}` }}</div>
            <div>{{ `B角： ${scope.row.res_b_name || '-'}；` }}</div>
            <div>{{ `电话： ${scope.row.res_b_phone || '-'}` }}</div>
          </div>
          <div slot="reference">
            <div class="status-label badge-info text-left w-100">
              <div>A角:{{ scope.row.res_a_name }}</div>
              <div>B角:{{ scope.row.res_b_name }}</div>
            </div>
          </div>
        </el-popover>
      </template>
    </c-table>
    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <el-dialog
      :visible.sync="reportVisible"
      :close-on-click-modal="false"
      :before-close="handleCreditClose"
      append-to-body
      top="30px"
      width="80%"
    >
      <el-tabs v-model="activeName">
        <el-tab-pane label="立项详情" name="first">
          <approve-edit view-mode :query-id="queryId"></approve-edit>
        </el-tab-pane>
        <el-tab-pane label="数字档案卡">
          <credit-file :query-id="queryId" :viewMode="viewMode"></credit-file>
        </el-tab-pane>
        <el-tab-pane label="政府推荐函" v-if="+relatedData.submit_type === 1">
          <recommend-file :related-data="relatedData" :viewMode="true"></recommend-file>
        </el-tab-pane>
        <el-tab-pane label="附件">
          <attach-view :queryId="queryId" :visible="reportVisible"></attach-view>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
    <approve-edit-dialog
      :visible.sync="approveVisible"
      @success="getData(params.index)"
      :query-id="relatedId"
    ></approve-edit-dialog>
  </div>
</template>

<script>
import SelectAddress from '@/components/select/SelectAddress'
import { enumGuatype, enumItemStatus } from '@/credit/plugins/enumTown'
import CreditFile from '@/credit/components/creditFile/CreditCard'
import AttachView from '@/credit/components/AttachView'
import { mapGetters } from 'vuex'
import { MANAGE_JOBS } from '@/credit/plugins/constant'
import RecommendFile from '@/credit/views/city/program/RecommendFile'
import ApproveEditDialog from '@/credit/views/county/unionProvince/components/ApproveEditDialog'
import ApproveEdit from '@/credit/views/county/unionProvince/components/ApproveEdit'
export default {
  components: {
    SelectAddress,
    AttachView,
    CreditFile,
    RecommendFile,
    ApproveEdit,
    ApproveEditDialog,
  },
  data() {
    return {
      enumItemStatus,
      order: {
        approved_date: 'desc',
      },
      params: {
        index: 1,
        size: 15,
        'gua_type.in': '1,2,4',
        'is_approval.eq': '1',
        'item_status.eq': '0',
        'service_id.eq': '',
        address_code: '',
        customer_name: '',
        corp_name: '',
      },
      loading: false,
      reportVisible: false,
      related: {},
      relatedData: {},
      queryId: '',
      viewMode: false,
      tableName: 'customer_related',
      tableData: [],
      tableColumns: [
        {
          attrs: { label: '项目名称', prop: 'customer_name', minWidth: '110px' },
          process: (v, row) => ({
            attrs: { class: 'project-history', attrs: { 'data-history': row.is_history } },
          }),
        },
        {
          attrs: { label: '业务类型', prop: 'gua_type', align: 'center' },
          process: v => enumGuatype[v] || '-',
        },
        { attrs: { label: '地址', prop: 'address' }, slot: 'address' },
        { attrs: { label: '负责人', prop: 'corp_name', align: 'center' } },
        { attrs: { label: '联系电话', prop: 'mobile_no', align: 'center' } },
        { attrs: { label: '申请金额(万元)', prop: 'apply_funds', align: 'center' } },
        { attrs: { label: '操作时间' }, slot: 'time' },
        { attrs: { label: '项目来源', prop: 'recommendOrg', align: 'center' } },
        // { attrs: { label: '项目状态', prop: 'item_status', align: 'center' }, slot: 'status' },
        {
          attrs: { label: '项目经理', prop: 'resPersons', className: 'pre-wrap' },
          slot: 'resPersons',
        },
        {
          attrs: { label: '操作', align: 'center', width: 150 },
          operations: [
            {
              content: '立项',
              icon: 'fa fa-edit',
              event: this.handleEdit,
              ifRender: row =>
                +row.item_status === 0 && [row.res_a, row.res_b].includes(this.userId),
            },
            {
              content: '修改数字档案卡',
              icon: 'fa fa-file-text',
              event: this.handleEditReport,
            },
            { content: '查看', icon: 'fa fa-search', event: this.handleView },
          ],
        },
      ],
      totalCount: 0,
      approveVisible: false,
      relatedId: '',
      activeName: 'first',
    }
  },
  computed: {
    ...mapGetters(['org', 'userId', 'job', 'user']),
    clientId() {
      return this.org.clientId
    },
    isManager() {
      return MANAGE_JOBS.includes(this.job)
    },
    isUserTown() {
      return this.user.orgRegionLever === 3
    },
  },
  watch: {},
  mounted() {},
  created() {
    this.params['service_id.eq'] = this.clientId
    this.getData()
  },
  methods: {
    handleEdit(row) {
      this.approveVisible = true
      this.relatedId = row.customer_related_id || ''
    },
    handleEditReport(row) {
      this.activeName = 'first'
      this.queryId = row.customer_related_id
      this.relatedData = row
      this.viewMode = false
      this.reportVisible = true
    },
    handleView(row) {
      this.activeName = 'first'
      this.queryId = row.customer_related_id
      this.relatedData = row
      this.viewMode = true
      this.reportVisible = true
    },
    ataAdapter(item) {
      item.resPersons = `A角: ${item.res_a_name || '-'}\r\nB角: ${item.res_b_name || '-'}`
      switch (+item.submit_type) {
        case 1:
          item.recommendOrg = item.submit_person_name
          break
        case 2:
          item.recommendOrg = item.service_name
          break
        case 5:
          item.recommendOrg = item.bank_name
          break
        default:
          item.recommendOrg = item.submit_person_name
      }
      return item
    },
    getData(index = 1) {
      this.params.index = index
      if (!this.isManager) {
        this.params['orWhere.pre_approval_person.eq'] = this.userId
        this.params['orWhere.res_a.eq'] = this.userId
        this.params['orWhere.res_b.eq'] = this.userId
      }
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.tableName, this.params, this.order)
        .then(res => {
          const data = (res && res.data && res.data.data) || []
          this.tableData = data.map(this.ataAdapter)
          this.totalCount = (res && res.data && res.data.totalCount) || 0
        })
        .catch(() => {
          this.$message.error('请求项目库失败')
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleCreditClose() {
      this.reportVisible = false
      if (this.viewMode) {
        return
      }
      this.getData(this.params.index)
    },
  },
}
</script>
<style lang="scss" scoped>
.status-label {
  display: inline-block;
  padding: 0.25em 0.4em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  vertical-align: baseline;
  border-radius: 0.25rem;
  transition: color 0.15s;
}
</style>
